<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<script src="js/vue2.4.0.js"></script>
		<style>
			@media (min-width: 992px) {
				.my-foot span {
					font-size:28px;
					
				}
				#myscroll{
					height: 300px;
				}
			}
			@media (max-width: 400px) {
				.dropdown-menu{
					left: -100px;
				}
				#myscroll{
					height: 150px;
				}
			}
		</style>
	</head>
	<body>
		<div id="app2">
		
			<div class="container my-foot">
		    	<div class="row" style="text-align: center;bottom: 0px;">
					<!-- <div class="col-lg-3 col-xs-3" >
		    			<div class="thumbnail" style="border: none;">
		    				<a href="javascript:#" onclick="parent.location.href='userMian.html?pageType=0'">
					            <img class="nav-foot-img" :src="navImges[0]"
					                 alt="通用的占位符缩略图" @mouseover="change(0,1)" @mouseout="change(0,0)">
					            <span :style="title[0]">主页</span>
		    				</a>
		        		</div>
				    </div> -->
					<div class="col-lg-3 col-xs-3" >
		    			<div class="thumbnail" style="border: none;">
		    				<a href="javascript:#" onclick="parent.location.href='fileManage.html?pageType=1'">
		    					<img class="nav-foot-img" :src="navImges[1]"
				                 	alt="通用的占位符缩略图 " @mouseover="change(1,1)" @mouseout="change(1,0)">
				            	<span :style="title[1]">文件</span>
		    				</a>
		        		</div>
				    </div>
				    <!-- <div class="col-lg-3 col-xs-3" >
		    			<div class="thumbnail" style="border: none;">
		    				<a href="javascript:#" onclick="parent.location.href='userMian.html?pageType=2'">
							<a href="javascript:#" onclick="alert('敬请期待')">
		    					<img class="nav-foot-img" :src="navImges[2]"
				                 	alt="通用的占位符缩略图"  @mouseover="change(2,1)" @mouseout="change(2,0)">
		        				<span :style="title[2]">发现</span>
		    				</a>
		    			</div>
				    </div> -->
				    <div class="col-lg-3 col-xs-3" style="float: right;">
		    			<div class="thumbnail" style="border: none;">
		    				<a href="javascript:#" onclick="parent.location.href='user.html?pageType=3'">
		    					 <img class="nav-foot-img" :src="navImges[3]"
				                 	alt="通用的占位符缩略图" @mouseover="change(3,1)" @mouseout="change(3,0)">
		        				<span :style="title[3]">个人</span>
		    				</a>
		    			</div>
				    </div>
				</div>
			</div>
		</div>
	</body>
</html>
<script>
	var vm2 = new Vue({
		el:'#app2',
		data:{
			navImges:['images/home.jpg','images/dir.jpg','images/more.jpg','images/people.jpg'],
			title:[
				{color:'black'},
				{color:'black'},
				{color:'black'},
				{color:'black'}
			]
		},
		methods:{
			change: function(i,flag){
		    	var imgName = this.navImges[i].slice(0,-4);
		    	var imgPrefix = this.navImges[i].slice(-3);
		    	if(flag == 1){
		    		//无法更新vue数组
//		    		this.navImges[i] = imgName + '1' + '.' + imgPrefix;
//		    		this.title[i] = {color:'red'};
					this.navImges.splice(i,1,imgName + '1' + '.' + imgPrefix);
					this.title.splice(i,1,{color:'red'});
		    	}else{
//		    		this.navImges[i] = imgName.slice(0,-1) + '.' + imgPrefix;
//		    		this.title[i] = {color:'black'};
					this.navImges.splice(i,1,imgName.slice(0,-1) + '.' + imgPrefix);
					this.title.splice(i,1,{color:'black'});
		    	}
	    	}
		}
	});
	var param = window.paramFromParent;
	console.log(param)
</script>
